<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>事件循环机制 | JOE&#39; Blog</title>
    <meta name="generator" content="VuePress 1.5.1">
    <link rel="icon" href="/vuepress-blog/favicon.ico">
    <meta name="description" content="个人博客">
    <meta name="keywords" content="前端博客,joe">
    <link rel="preload" href="/vuepress-blog/assets/css/0.styles.1d2502bd.css" as="style"><link rel="preload" href="/vuepress-blog/assets/js/app.c2c176f8.js" as="script"><link rel="preload" href="/vuepress-blog/assets/js/2.cfb39290.js" as="script"><link rel="preload" href="/vuepress-blog/assets/js/7.0748d6e8.js" as="script"><link rel="prefetch" href="/vuepress-blog/assets/js/10.e6cc7d41.js"><link rel="prefetch" href="/vuepress-blog/assets/js/3.5196b5a8.js"><link rel="prefetch" href="/vuepress-blog/assets/js/4.5159fade.js"><link rel="prefetch" href="/vuepress-blog/assets/js/5.ad0004fd.js"><link rel="prefetch" href="/vuepress-blog/assets/js/6.9d4540a4.js"><link rel="prefetch" href="/vuepress-blog/assets/js/8.6b7d4a9b.js"><link rel="prefetch" href="/vuepress-blog/assets/js/9.8e98eab6.js">
    <link rel="stylesheet" href="/vuepress-blog/assets/css/0.styles.1d2502bd.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vuepress-blog/" class="home-link router-link-active"><!----> <span class="site-name">JOE' Blog</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vuepress-blog/" class="nav-link">
  Home
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Category" class="dropdown-title"><span class="title">Category</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vuepress-blog/guide.html#笔记" class="nav-link">
  Note
</a></li><li class="dropdown-item"><!----> <a href="/vuepress-blog/guide.html#总结" class="nav-link">
  Summary
</a></li><li class="dropdown-item"><!----> <a href="/vuepress-blog/guide.html#文章" class="nav-link">
  Article
</a></li></ul></div></div><div class="nav-item"><a href="/vuepress-blog/about.html" class="nav-link">
  About
</a></div><div class="nav-item"><a href="https://github.com/Galileo01" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vuepress-blog/" class="nav-link">
  Home
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Category" class="dropdown-title"><span class="title">Category</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vuepress-blog/guide.html#笔记" class="nav-link">
  Note
</a></li><li class="dropdown-item"><!----> <a href="/vuepress-blog/guide.html#总结" class="nav-link">
  Summary
</a></li><li class="dropdown-item"><!----> <a href="/vuepress-blog/guide.html#文章" class="nav-link">
  Article
</a></li></ul></div></div><div class="nav-item"><a href="/vuepress-blog/about.html" class="nav-link">
  About
</a></div><div class="nav-item"><a href="https://github.com/Galileo01" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>事件循环机制</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vuepress-blog/article/event_loop.html#_1-js是单线程的" class="sidebar-link">1.js是单线程的</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vuepress-blog/article/event_loop.html#_2-执行机制" class="sidebar-link">2.执行机制</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="事件循环机制"><a href="#事件循环机制" class="header-anchor">#</a> 事件循环机制</h1> <h2 id="_1-js是单线程的"><a href="#_1-js是单线程的" class="header-anchor">#</a> 1.js是单线程的</h2> <p>（但H5 的Web Workers 可以实现多线程）</p> <ul><li><p>例如 alert，会暂停当前主线程的执行，同时暂停异步线程的计时</p></li> <li><p>所有回调函数，都在主线程队列执行</p></li> <li><p>先执行同步代码，后执行异步代码的回调函数：<br>
先执行初始化代码（ <strong>3类：ajax，事件，setIemeout/Intervel 的声明代码</strong> ），即 <strong>同步代码</strong>  然后在某个时刻执行他们的回调函数   ,  即<strong>异步代码</strong></p></li> <li><p>设置成 单线程的目的是：<strong>保证只有一个线程操作Dom</strong></p></li></ul> <h2 id="_2-执行机制"><a href="#_2-执行机制" class="header-anchor">#</a> 2.执行机制</h2> <ul><li><p>分线程由 浏览器执行，不由js引擎执行，因为，<strong>浏览器是多线程的，js是单线程的</strong></p></li> <li><p>不同的异步操作添加到任务队列的时机不同，<br>
如 onclick, setTimeout, ajax 处理的方式都不同，这些异步操作是由浏览器内核的 webcore 来执行的，webcore 包含3种 webAPI，<strong>分别是 DOM Binding、network、timer模块。</strong></p></li> <li><p>任务队列=消息队列=事件队列=callback queue<br>
事件循环机制：主线程的所有同步任务（同步代码）执行完后，再查看任务队列是否有待执行的异步任务，如果有，按照顺序一个一个将其放入主线程，执行回调函数，异步任务（异步代码 ），执行完一个异步任务，再去查看任务队列 ，不断的查看,执行，循环下去。
<img src="https://images2015.cnblogs.com/blog/1094893/201704/1094893-20170419140631852-1337804828.png" alt=""></p></li></ul> <p>js执行代码时，<br>
先<strong>判断该段代码是同步任务还是异步任务</strong>：
同步任务直接放入主线程执行栈，异步任务 交给浏览器内核新开线程 执行，<strong>并注册事件表</strong>，
异步任务执行完后（时间到了，触发了事件）， 将 异步任务的<strong>回调函数</strong>送入 任务队列（回调队列），
<strong>等待主线程的同步任务执行完后</strong>，查看任务队列里 是否有  异步任务   ，如果有 将任务队列的 <strong>回调函数送入 主线程 执行栈</strong> 执行，执行完后 ，再次查看 任务 队列 是否还有可执行的任务, <strong>不停的 检查，和执行</strong> 。</p></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"><!----></div></div>
    <script src="/vuepress-blog/assets/js/app.c2c176f8.js" defer></script><script src="/vuepress-blog/assets/js/2.cfb39290.js" defer></script><script src="/vuepress-blog/assets/js/7.0748d6e8.js" defer></script>
  </body>
</html>
